<template>
  <header class="header">
    <div class="header-wrap" ref="headerWrap">
      <div class="h-wrap">
        <div class="logo" @click="toHome">
          <span>
            <i class="iconfont zhi">&#xe60d;</i>
            <i class="iconfont fou">&#xe60c;</i>
          </span>
        </div>
        <div class="nav">
          <div class="center">
            <router-link :to="{name:'index'}" tag="li" exact>首页</router-link>
            <router-link :to="{name:'community'}" tag="li">社区</router-link>
            <li @click="notify">关于我</li>
          </div>
          <div class="search">
            <input type="text" placeholder="搜索" class="search-box" v-model="searchKey" />
            <i class="iconfont" @click="$store.commit('setSearchKey',searchKey)">&#xe619;</i>
          </div>
        </div>
        <div class="userRight" id="userRight">
          <div class="center right" v-show="!loginFlag">
            <li class="login" @click="$router.push('/login').catch(res=>{})">马上登录</li>
            <li class="register" @click="$router.push('/register').catch(res=>{})">立即注册</li>
          </div>
          <div class="center right" v-show="loginFlag">
            <li class="email">
              <i class="iconfont">&#xe652;</i>
            </li>
            <li class="email">
              <i class="iconfont">&#xe60b;</i>
            </li>
            <div class="avatar">
              <i class="iconfont">
                <img :src="user.UHead" alt />
              </i>
            </div>
          </div>
        </div>
        <div class="Miavatar" style="display:none">
          <!-- 表表文章  -->
          <i class="iconfont" id="sendArticle" v-if="loginFlag" @click="sendQu">&#xe613;</i>
          <!-- 登录后显示的头像 -->
          <span class="Mavatar" v-if="loginFlag" @click="toUserCenter">
            <img :src="user.UHead" alt />
          </span>
          <!-- <i class="iconfont avatar" id="avatar" v-if="loginFlag" @click="showmenu1">&#xe617;</i> -->
          <!-- 未登录的头像 -->
          <i class="iconfont" v-if="!loginFlag" @click="$router.push('/login').catch()">&#xe634;</i>
          <!-- <transition name="el-zoom-in-top">
            <div v-if="avatar" class="transition-box">
              <div>
                <i class="iconfont" style="color: #3ea145">&#xe652;</i> 消息
              </div>
              <div id="logOut" @click="logOut">
                <i class="iconfont" style="color: #7e58c4">&#xe643;</i> 退出
              </div>
            </div>
          </transition> -->
          <!-- <transition name="el-zoom-top-in ">
            <div v-if="sendArticle" class="transition-box menu2">
              <div id='tiwen' @click="sendQu">
                <i class="iconfont"  style="color: red" >&#xe722;</i> 提问
              </div>
              <div id='fabiao' @click="sendQu">
                <i class="iconfont"  style="color: #009a61;">&#xe62c;</i> 发表
              </div>
            </div>
          </transition>-->
        </div>
      </div>
      <div class="h-wrap copyHeader">
        <div>{{$store.state.topTitle}}</div>
      </div>
    </div>
  </header>
</template>

<script>
// import { getUserL } from "../common/mixin";
import { getDirection } from "../common/loginUtil";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      // 是否滚动header
      isScroll: false,
      sendArticle: false,
      avatar: false,
      //搜索关键字
      searchKey: "",
      uid: -1,
      topicTitle: "",
      startx: 0,
      starty: 0
    };
  },
  // mixins:[getUserL],
  created() {},
  mounted() {
    window.addEventListener("click", this.menuClick);
  },
  computed: {
    ...mapGetters({
      user: "getUser"
    }),
    loginFlag() {
      return this.user.UID;
    }
  },
  methods: {
    onscroll() {
      //给页面绑定滑轮滚动事件
      if (document.addEventListener) {
        //firefox
        document.addEventListener("DOMMouseScroll", this.scrollFunc, false);
      } //滚动滑轮触发scrollFunc方法 //ie 谷歌
      window.onmousewheel = document.onmousewheel = this.scrollFunc;
    },
    scrollFunc(e) {
      e = e || window.event;
      let headerWrap = this.$refs.headerWrap;
      if (e.wheelDelta) {
        //第一步：先判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 50) {
          //当滑轮向上滚动时
          if (headerWrap) {
            this.$refs.headerWrap.style.transform = "translateY(0)";
          }
        }
        if (e.wheelDelta < 50) {
          //当滑轮向下滚动时
          if (headerWrap) {
            this.$refs.headerWrap.style.transform = "translateY(-58px)";
          }
        }
      } else if (e.detail) {
        //Firefox滑轮事件
        if (e.detail == -3) {
          //当滑轮向上滚动时
          // console.log('shang');
          if (headerWrap) {
            this.$refs.headerWrap.style.transform = "translateY(0)";
          }
        }
        if (e.detail == 3) {
          //当滑轮向下滚动时
          // console.log('xia');
          if (headerWrap) {
            this.$refs.headerWrap.style.transform = "translateY(-58px)";
          }
        }
      }
    },
    delScroll() {
      //给页面绑定滑轮滚动事件
      if (document.addEventListener) {
        //firefox
        document.removeEventListener("DOMMouseScroll", this.scrollFunc, false);
      } //滚动滑轮触发scrollFunc方法 //ie 谷歌
      window.onmousewheel = document.onmousewheel = null;
    },
    // 绑定触摸事件
    onTouchScroll(e) {
      document.addEventListener("touchstart", this.touchStartEvent, false);
      document.addEventListener("touchend", this.touchEndEvent, false);
    },
    // 触摸结束
    touchEndEvent(e) {
      let endx, endy;
      endx = e.changedTouches[0].pageX;
      endy = e.changedTouches[0].pageY;
      let direction = getDirection(this.startx, this.starty, endx, endy);
      switch (direction) {
        case 0:
          break;
        case 1:
          // 上滑动\
          if (this.$refs.headerWrap == null) {
            return;
          }
          this.$refs.headerWrap.style.transform = "translateY(0)";
          break;
        case 2:
          if (this.$refs.headerWrap == null) {
            return;
          }
          this.$refs.headerWrap.style.transform = "translateY(-58px)";
          break;
        case 3:
          console.log("left");

          break;
        case 4:
          console.log("right");
          break;
        default:
      }
    },
    // 触摸开始
    touchStartEvent(e) {
      this.startx = e.touches[0].pageX;
      this.starty = e.touches[0].pageY;
    },
    // 删除触摸事件
    delTouchScroll() {
      document.removeEventListener("touchstart", this.touchStartEvent);
      document.removeEventListener("touchend", this.touchEndEvent);
    },
    notify() {
      this.$notify({
        title: "",
        message: "暂未开放。敬请期待",
        position: "top-left",
        type: "warning",
        left: 200
      });
    },
    toHome() {
      this.$router.push("/").catch(err => {
        console.log("已捕获···输出报错", err);
      });
    },
    toUserCenter() {
      this.$router.push("/usercenter").catch(err => {
        console.log("已捕获···输出报错", err);
      });
    },
    // showmenu1() {
    //   this.avatar = !this.avatar;
    // },
    // menuClick(e) {
    //   if (e.target.id != "avatar") {
    //     if (e.target.id == "logOut") {
    //       return;
    //     }
    //     this.avatar = false;
    //   }
    //   // if (e.target.id != "sendArticle") {
    //   //   if (e.target.id == "tiwen" || e.target.id == "fabiao") {
    //   //     return;
    //   //   }
    //   //   this.sendArticle = false;
    //   // }
    // },
    
    sendQu() {
      // this.sendArticle = false;
      if (this.$route.name == "sendblog") {
        return;
      }
      this.$router.push({ name: "sendblog" }).catch(res => {
        console.log(res);
      });
    }
  },
  watch: {
    "$store.state.topicTitle"(newFlag) {
      if (newFlag) {
        this.onscroll();
        this.onTouchScroll();
      } else {
        this.delScroll();
        if (this.$refs.headerWrap == null) {
          return;
        }
        this.$refs.headerWrap.style.transform = "translateY(0)";
        this.delTouchScroll();
      }
    }
  }
};
</script>

<style lang='scss'>
@import "~assets/css/global.css";

@media screen and(max-width: 1268px) {
  header {
    .header-wrap {
      width: 968px !important;
    }
  }
}
@media screen and(max-width: 994px) {
  header {
    .header-wrap {
      width: 750px !important;
      margin: 0 auto !important;
    }
  }
}
@media screen and(max-width: 500px) {
  header {
    .header-wrap {
      height: 58px !important;
      width: 100% !important;
      margin: 0 auto !important;
      .h-wrap {
        .logo {
          .wenhao {
            display: none;
          }
        }
        .search {
          .search-box {
            width: 120px !important;
          }
        }
        .center {
          display: none !important;
        }
        .userRight {
          display: none !important;
        }
        .Miavatar {
          display: flex !important;
          line-height: 58px;
          align-items: center;
          flex: 1;
          i {
            font-size: 18px;
          }
          .Mavatar {
            margin-left: 18px;
            color: #009a61;
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-top: -12px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .transition-box {
            position: absolute;
            margin-bottom: 10px;
            margin-left: 26px;
            width: 60px;
            height: 77px;
            border-radius: 5px;
            background-color: white;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-right: 20px;
            border: 1px solid #969696;
            div {
              height: 36px;
              line-height: 36px;
              font-size: 14px;
            }
          }
          .menu2 {
            margin-left: -8px;
            i {
              color: #009a61;
            }
          }
        }
      }
      .copyHeader {
        margin-left: 30px;
        line-height: 60px;
        font-weight: bold;
      }
    }
  }
}
.header {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 58px;
  font-size: 20px;
  border-top: 2px solid #009a61;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.1);
  background: #fafafa;
  overflow: hidden;
  .header-wrap {
    height: 116px;
    transition: all 0.3s;
    width: 1140px;
    margin: 0 auto;
    // 公共
    .center {
      display: flex;
      justify-content: space-between;
      padding: 8px;
      height: 58px;
      align-items: center;
      box-sizing: border-box;
      list-style: none;
      li {
        font-size: 16px;
        cursor: pointer;
        height: 35px;
        line-height: 35px;
        width: 50px;
        border-radius: 3px;
        text-align: center;
        &:hover {
          background: rgba(0, 154, 97, 0.08);
        }
      }
    }
    .h-wrap {
      display: flex;
      .logo {
        height: 58px;
        line-height: 58px;
        flex: 1;
        display: flex;
        justify-content: center;
        i {
          font-size: 25px;
        }
        .zhi {
          font-size: 35px;
          color: #009a61;
        }
      }
      .nav {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;

        .search {
          .search-box {
            border: none;
            outline: none;
            width: 200px;
            background-color: #eee;
            height: 30px;
            box-sizing: border-box;
            border-radius: 999px;
            padding: 0 30px 0 15px;
            transition: all 0.3s;
          }
          i {
            display: inline-block;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            margin-left: -35px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
          }
          .search-box:focus {
            width: 250px;
            color: black;
          }
          .search-box:focus + i {
            background: #969696;
            color: white;
          }
        }
      }
      .userRight {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        .right {
          li {
            width: 80px;
            color: #009a61;
          }

          .email {
            width: 40px;
            i {
              font-size: 22px;
            }
          }
          .avatar {
            margin-left: 10px;
            width: 25px;
            height: 25px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
            // i {
            //   font-size: 26px;
            //   cursor: pointer;
            // }
          }
        }
        .login {
          margin-right: 5px;
        }
        .register {
          background-color: #009a61;
          color: white !important;
          &:hover {
            background: #008151;
            color: white;
          }
        }
      }
    }
    // .copyHeader {
    //   line-height: 50px;
    //   display: flex;
    //   justify-content: space-between;
    //   .imgLogoWrap {
    //     font-weight: bolder;
    //   }
    // }
  }
  .copyHeader {
    line-height: 60px;
    font-size: 16px;
    font-weight: 500;
  }

  // .transition-box {
  //   position: fixed;
  //   z-index: 9999;
  //   left: 660px;
  //   top: 53px;
  //   margin-bottom: 10px;
  //   width: 125px;
  //   height: 140px;
  //   border-radius: 4px;
  //   background-color: #fafafa;
  //   border: 1px solid #e1e1e1;
  //   text-align: center;
  //   padding: 40px 20px;
  //   -webkit-box-sizing: border-box;
  //   box-sizing: border-box;
  //   margin-right: 20px;
  // }
}
</style>